<template>
  <div class="TourismStrategy">
    <NavBar />
    <div id="app" class="container">
      <br /><br />
      <div class="main clearfix">
        <div class="content">
          <div class="filter">
            <div class="filter-wrapper clearfix">
              <ul class="filter-tag">
                <li class="on _j_tag"><a href="javascript:;">全部</a></li>
                <li data-tid="5e3286e8304b00003b0053d8" class="_j_tag">
                  <a href="javascript:;">文化</a>
                </li>
                <li data-tid="5e3286e8304b00003b0053d9" class="_j_tag">
                  <a href="javascript:;">特别策划</a>
                </li>
                <li data-tid="5e3286e8304b00003b0053da" class="_j_tag">
                  <a href="javascript:;">美食</a>
                </li>
                <li data-tid="5e3286e8304b00003b0053dd" class="_j_tag">
                  <a href="javascript:;">节庆</a>
                </li>
                <li data-tid="5e3286e8304b00003b0053e7" class="_j_tag">
                  <a href="javascript:;">登山</a>
                </li>
                <li data-tid="5e3286e8304b00003b0053e5" class="_j_tag">
                  <a href="javascript:;">星旅行</a>
                </li>
                <li data-tid="5e3286e8304b00003b0053e6" class="_j_tag">
                  <a href="javascript:;">滑雪</a>
                </li>
                <li data-tid="5e3286e8304b00003b0053e1" class="_j_tag">
                  <a href="javascript:;">摄影</a>
                </li>
                <li data-tid="5e3286e8304b00003b0053e3" class="_j_tag">
                  <a href="javascript:;">建筑</a>
                </li>
                <li data-tid="5e3286e8304b00003b0053e4" class="_j_tag">
                  <a href="javascript:;">家庭</a>
                </li>
                <li data-tid="5e3286e8304b00003b0053dc" class="_j_tag">
                  <a href="javascript:;">自驾</a>
                </li>
                <li data-tid="5e3286e8304b00003b0053d7" class="_j_tag">
                  <a href="javascript:;">户外</a>
                </li>
                <li data-tid="5e3286e8304b00003b0053de" class="_j_tag">
                  <a href="javascript:;">必备</a>
                </li>
                <li data-tid="5e3286e8304b00003b0053db" class="_j_tag">
                  <a href="javascript:;">购物</a>
                </li>
                <li data-tid="5e3286e8304b00003b0053e0" class="_j_tag">
                  <a href="javascript:;">周边</a>
                </li>
                <li data-tid="5e3286e8304b00003b0053d5" class="_j_tag">
                  <a href="javascript:;">数据报告</a>
                </li>
                <li data-tid="5e3286e8304b00003b0053e2" class="_j_tag">
                  <a href="javascript:;">旅行主义</a>
                </li>
                <li data-tid="5e3286e8304b00003b0053df" class="_j_tag">
                  <a href="javascript:;">观赏</a>
                </li>
                <li data-tid="5e3286e8304b00003b0053d6" class="_j_tag">
                  <a href="javascript:;">休闲</a>
                </li>
              </ul>
              <a href="javascript:void(0);" class="trigger _j_trigger_btn"
                >更多</a
              >
            </div>
          </div>
          <div class="guide-list">
            <div class="item clearfix">
              <a
                href="./strategy_detail.html?id=5e33bd2a9c300000e9003ae3"
                target="_blank"
                class="_j_item"
              >
                <div class="img">
                  <img
                    src="../assets/images/wKgEaVyK_4SAdEn8AA10khckiyI39.jpeg"
                  />
                </div>
                <div class="detail">
                  <h3>超实用的长隆亲子游攻略，出发前必看</h3>
                  <ul>
                    带娃出游去哪玩？必须是广州长隆旅游度假区！作为国内超热门的亲子游乐王国，广州长隆每年都会吸引一大批游客！那么，广州长隆究竟有几个乐园和酒店？亲子出游怎么玩更方便又尽兴？酒店又该如何选择？小蜗牛帮你一一解答，还有各种独家游玩小妙招双手奉上！
                  </ul>
                  <div class="extra">
                    <span class="location"><i></i>广州</span>
                    <span class="view"><i></i>1</span>
                  </div>
                </div>
              </a>
            </div>
            <div class="item clearfix">
              <a
                href="./strategy_detail.html?id=5e33bd2a9c300000e9003ae4"
                target="_blank"
                class="_j_item"
              >
                <div class="img">
                  <img
                    src="../assets/images/wKgED1v7lwqAZm1mAAG55YkXRWI84.jpeg"
                  />
                </div>
                <div class="detail">
                  <h3>有娃必看，广州长隆野生动物园全攻略</h3>
                  <ul>
                    如果要说动物园，楼主强烈推荐带娃去广州长隆野生动物园！野生动物园有许多，但是广州长隆野生动物园只有一个！为什么长隆野生动物园如此与众不同呢？
                  </ul>
                  <div class="extra">
                    <span class="location"><i></i>广州</span>
                    <span class="view"><i></i>143088</span>
                  </div>
                </div>
              </a>
            </div>
            <div class="item clearfix">
              <a
                href="./strategy_detail.html?id=5e33bd2a9c300000e9003ae5"
                target="_blank"
                class="_j_item"
              >
                <div class="img">
                  <img
                    src="../assets/images/wKgB3FEsZt6AaeAdAARfi3uw2CU10.jpeg"
                  />
                </div>
                <div class="detail">
                  <h3>广州小吃名店红黑榜：你还是当年珠江畔那个老字号吗？</h3>
                  <ul>
                    企鹅吃喝指南｜“城市指南“第4站－广州 小吃篇
                  </ul>
                  <div class="extra">
                    <span class="location"><i></i>广州</span>
                    <span class="view"><i></i>18916</span>
                  </div>
                </div>
              </a>
            </div>
            <div class="item clearfix">
              <a
                href="./strategy_detail.html?id=5e33bd2c9c300000e9003ae6"
                target="_blank"
                class="_j_item"
              >
                <div class="img">
                  <img
                    src="../assets/images/wKgBEFtYAbaAZ-Z4AAdEuJZ3y5o22.jpeg"
                  />
                </div>
                <div class="detail">
                  <h3>吃20cm的油炸大蜈蚣、⑥种昆虫！五毒之首到底什么味道？</h3>
                  <ul>
                    这是一个悲伤的故事，那天，我约瞎瞎出来吃饭……剩我独自一人挑战1%的广州人才敢吃的虫！提示：前方高能，胆小勿入！
                  </ul>
                  <div class="extra">
                    <span class="location"><i></i>广州</span>
                    <span class="view"><i></i>29677</span>
                  </div>
                </div>
              </a>
            </div>
            <div class="item clearfix">
              <a
                href="./strategy_detail.html?id=5e33bd2c9c300000e9003ae7"
                target="_blank"
                class="_j_item"
              >
                <div class="img">
                  <img
                    src="../assets/images/wKgBZ1nlfSaAUDRhAAcwkdSo3Hk98.jpeg"
                  />
                </div>
                <div class="detail">
                  <h3>上海十大人气景点，你都去过吗？</h3>
                  <ul>
                    上海素有“魔都”之称，一直是国内繁华都市的代表。根据马蜂窝用户出行数据，以下是最受欢迎的10个上海景点。这些景点是上海的城市精华，适合初次造访想要打卡景点的游客
                  </ul>
                  <div class="extra">
                    <span class="location"><i></i>上海</span>
                    <span class="view"><i></i>4002983</span>
                  </div>
                </div>
              </a>
            </div>
            <div class="item clearfix">
              <a
                href="./strategy_detail.html?id=5e33bd2c9c300000e9003ae8"
                target="_blank"
                class="_j_item"
              >
                <div class="img">
                  <img
                    src="../assets/images/wKgED1wL1WyAfh6wAAIJgBDsRpA21.jpeg"
                  />
                </div>
                <div class="detail">
                  <h3>N刷迪士尼，一篇干货满满的上海迪士尼攻略</h3>
                  <ul>
                    买了两次迪士尼季卡，N刷迪士尼，迪士尼迷妹为大家总结的一份上海迪士尼攻略。
                  </ul>
                  <div class="extra">
                    <span class="location"><i></i>上海</span>
                    <span class="view"><i></i>262521</span>
                  </div>
                </div>
              </a>
            </div>
            <div class="item clearfix">
              <a
                href="./strategy_detail.html?id=5e33bd2c9c300000e9003ae9"
                target="_blank"
                class="_j_item"
              >
                <div class="img">
                  <img
                    src="../assets/images/wKgBEFrkRVCAUV_ZAAWtxoKD0bU28.jpeg"
                  />
                </div>
                <div class="detail">
                  <h3>懒人吃货指南 | 轻松吃遍地道上海小吃</h3>
                  <ul>
                    去一个地方旅行当然要尝尝当地的特色美食，不然总觉得这趟旅行不完整。但是对于不熟悉上海的游客来说，“哪些是老上海小吃？去哪里能吃到地道的？”这些都是头疼的问题。这篇攻略将会给大家介绍老上海小吃，推荐一些老字号，并附上周边游玩小Tips
                  </ul>
                  <div class="extra">
                    <span class="location"><i></i>上海</span>
                    <span class="view"><i></i>191107</span>
                  </div>
                </div>
              </a>
            </div>
            <div class="item clearfix">
              <a
                href="./strategy_detail.html?id=5e33bd2c9c300000e9003aea"
                target="_blank"
                class="_j_item"
              >
                <div class="img">
                  <img
                    src="../assets/images/wKgED1wHkciAaj24AAuSFkxN7zE24.jpeg"
                  />
                </div>
                <div class="detail">
                  <h3>上海海昌海洋公园一日游攻略</h3>
                  <ul>
                    被高铁站的广告吸引到了海昌海洋公园，不得不说，这是我在上海玩过的最有趣的海洋公园。
                  </ul>
                  <div class="extra">
                    <span class="location"><i></i>上海</span>
                    <span class="view"><i></i>24908</span>
                  </div>
                </div>
              </a>
            </div>
            <div class="item clearfix">
              <a
                href="./strategy_detail.html?id=5e33bd2c9c300000e9003aeb"
                target="_blank"
                class="_j_item"
              >
                <div class="img">
                  <img
                    src="../assets/images/wKgBEFp319-AAngOAANweV_VNTM54.jpeg"
                  />
                </div>
                <div class="detail">
                  <h3>北京逛故宫全技能Get！</h3>
                  <ul>
                    北京土著说：我逛不逛，它都在那儿，我想啥时候逛就啥时候逛！外地游客说：来到大北京，必须逛故宫！常住在北京的外地人说：老家人来了N次，故宫已经逛了N次！不管你是从没逛过，还是第一次逛，还是正要第N+1次逛，逛故宫的技能你都get了吗？
                  </ul>
                  <div class="extra">
                    <span class="location"><i></i>北京</span>
                    <span class="view"><i></i>1554775</span>
                  </div>
                </div>
              </a>
            </div>
            <div class="item clearfix">
              <a
                href="./strategy_detail.html?id=5e33bd2c9c300000e9003aec"
                target="_blank"
                class="_j_item"
              >
                <div class="img">
                  <img
                    src="../assets/images/wKgBZ1ny08-AalUvAAkEbRsgv2811.jpeg"
                  />
                </div>
                <div class="detail">
                  <h3>周末去爬八达岭长城</h3>
                  <ul>
                    八达岭长城，位于北京市西北部的延庆区，是旧时军都山关沟古道；作为万里长城的一部分，这个建于明代的长城是最早向游人开放的地段，所以整个景区的餐饮、娱乐、交通等配套设施较为完善。
                  </ul>
                  <div class="extra">
                    <span class="location"><i></i>北京</span>
                    <span class="view"><i></i>211232</span>
                  </div>
                </div>
              </a>
            </div>
            <div style="float: right">
              <div style="float: left">
                <span style="line-height: 30px">
                  共2页 / 17条&nbsp;&nbsp;&nbsp;</span
                >
              </div>
              <div
                id="pagination"
                class="jq-pagination"
                style="display: inline"
              >
                <a
                  class="prev disabled"
                  href="javascript:void(0);"
                  jp-role="prev"
                  jp-data="0"
                  >上一页</a
                ><a
                  href="javascript:void(0);"
                  jp-role="page"
                  jp-data="1"
                  class="active"
                  >1</a
                ><a href="javascript:void(0);" jp-role="page" jp-data="2">2</a
                ><a
                  class="next"
                  href="javascript:void(0);"
                  jp-role="next"
                  jp-data="2"
                  >下一页</a
                ><a
                  class="last"
                  href="javascript:void(0);"
                  jp-role="last"
                  jp-data="2"
                  >尾页</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="side-sales">
          <h3>本周热卖</h3>
          <ul>
            <li>
              <a href="javascript:;" target="_blank"
                ><span class="image"
                  ><img
                    src="../assets/images/wKgBEFs6E4yAPz00AAhnvJUJ1j8238.gif"
                /></span>
                <div
                  title="广州长隆野生动物世界门票    随买随用 ／广州长隆旅游度假区／一票通玩 ／ 快速出票快捷入园 ／ 含空中览车及小火车/亲子乐园/赠送电子导览／自然零距离／广州长隆野生动物园"
                  class="title"
                >
                  广州长隆野生动物世界门票 随买随用 ／广州...
                </div>
                <span class="price">¥260</span>
              </a>
            </li>
            <li>
              <a href="javascript:;" target="_blank"
                ><span class="image"
                  ><img
                    src="../assets/images/wKgED1wweM2AVCMFAAzr37WPWDI967.gif"
                /></span>
                <div
                  title="广州长隆欢乐世界门票   当天可买／广州长隆旅游度假区／快速出票快捷入园／收藏店铺送卷送攻略／广东番禺汉溪长隆/长隆成人票／情侣票／家庭票／双人票／儿童票"
                  class="title"
                >
                  广州长隆欢乐世界门票 当天可买／广州长隆旅...
                </div>
                <span class="price">¥187</span>
              </a>
            </li>
            <li>
              <a href="javascript:;" target="_blank"
                ><span class="image"
                  ><img
                    src="../assets/images/wKgED1wdwVmAVaZUADon6OL7_xw084.gif"
                /></span>
                <div
                  title="当天可订/广州长隆野生动物世界门票/长隆野生动物园/广州长隆旅游度假区/含缆车小火车/南北门均可取票（提前1天规则退）"
                  class="title"
                >
                  当天可订/广州长隆野生动物世界门票/长隆野生...
                </div>
                <span class="price">¥256</span>
              </a>
            </li>
            <li>
              <a href="javascript:;" target="_blank"
                ><span class="image"
                  ><img
                    src="../assets/images/wKgBEFrEdj-Ac-nXAAOvgGsSLJI85.jpeg"
                /></span>
                <div
                  title="广州长隆水上乐园门票 一票通玩（电子票／当地必玩／免预约／超级大喇叭/热浪谷/意想不到的水上乐园）"
                  class="title"
                >
                  广州长隆水上乐园门票 一票通玩（电子票／当地...
                </div>
                <span class="price">¥122</span>
              </a>
            </li>
            <li>
              <a href="javascript:;" target="_blank"
                ><span class="image"
                  ><img
                    src="../assets/images/wKgED1wk2LeAC2NJAAJQtab6Yqw67.jpeg"
                /></span>
                <div
                  title="寻味广州1日游（6人小团·探黄埔军校陈家祠·电车看广州塔+沙面·西关美食秘籍·本地人带玩）"
                  class="title"
                >
                  寻味广州1日游（6人小团·探黄埔军校陈家祠·...
                </div>
                <span class="price">¥288</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="footer" id="footer">
      <div class="ft-content" style="width: 1105px">
        <div class="ft-info clearfix">
          <dl class="ft-info-col ft-info-intro">
            <dt>骡窝窝旅游网</dt>
            <dd>
              叩丁狼是一家专注于培养高级IT技术人才，为学员提供定制化IT职业规划方案及
            </dd>
            <dd>
              意见咨询服务的教育科技公司，为您提供海量优质课程，以及创新的线上线下学
            </dd>
            <dd>习体验，帮助您获得全新的个人发展和能力提升。</dd>
          </dl>
          <dl class="ft-info-col ft-info-qrcode">
            <dd>
              <span class="ft-qrcode-tejia"></span>
            </dd>
            <dd>
              <span class="ft-qrcode-weixin"></span>
            </dd>
            <dd>
              <span
                class="ft-qrcode-weixin"
                style="background-image: url(../assets/images/qrcode.jpg&#39;)"
              ></span>
            </dd>
          </dl>
          <dl class="ft-info-social">
            <dt>向崇尚自由的加勒比海盗致敬！</dt>
            <dd>
              <a
                class="ft-social-weibo"
                target="_blank"
                href="javascript:;"
                rel="nofollow"
                ><i class="ft-social-icon"></i
              ></a>
              <a
                class="ft-social-qqt"
                target="_blank"
                href="javascript:;"
                rel="nofollow"
                ><i class="ft-social-icon"></i
              ></a>
              <a
                class="ft-social-qzone"
                target="_blank"
                href="javascript:;"
                rel="nofollow"
                ><i class="ft-social-icon"></i
              ></a>
            </dd>
          </dl>
        </div>

        <div class="ft-links">
          <a target="_blank" href="http://china.makepolo.com/">马可波罗</a
          ><a target="_blank" href="http://www.onlylady.com/">Onlylady女人志</a
          ><a target="_blank" href="http://trip.elong.com/">艺龙旅游指南</a
          ><a target="_blank" href="http://www.cncn.com/">欣欣旅游网</a>
          <a target="_blank" href="http://www.8264.com/">户外运动</a
          ><a target="_blank" href="http://www.yue365.com/">365音乐网</a
          ><a target="_blank" href="http://ishare.iask.sina.com.cn/"
            >爱问共享资料</a
          ><a target="_blank" href="http://www.uzai.com/">旅游网</a>
          <a target="_blank" href="http://www.zongheng.com/">小说网</a>
          <a target="_blank" href="http://www.xuexila.com/">学习啦</a
          ><a target="_blank" href="http://www.yododo.com/">游多多自助游</a
          ><a target="_blank" href="http://www.zhcpic.com/">问答</a
          ><a target="_blank" href="http://huoche.mafengwo.cn/">火车时刻表</a>
          <a target="_blank" href="http://www.lvmama.com/">驴妈妈旅游网</a>
          <a target="_blank" href="http://www.haodou.com/">好豆美食网</a
          ><a target="_blank" href="http://www.taoche.com/">二手车</a
          ><a target="_blank" href="http://www.lvye.cn/">绿野户外</a
          ><a target="_blank" href="http://www.tuniu.com/">途牛旅游网</a>
          <a target="_blank" href="http://www.mapbar.com/">图吧</a>
          <a target="_blank" href="http://www.chnsuv.com/">SUV联合越野</a
          ><a target="_blank" href="http://www.uc.cn/">手机浏览器</a
          ><a target="_blank" href="http://sh.city8.com/">上海地图</a
          ><a target="_blank" href="http://www.tianqi.com/">天气预报查询</a>
          <a target="_blank" href="http://www.ly.com/">同程旅游</a>
          <a target="_blank" href="http://www.tieyou.com/">火车票</a
          ><a target="_blank" href="http://www.yunos.com/">YunOS</a
          ><a target="_blank" href="http://you.ctrip.com/">携程旅游</a
          ><a target="_blank" href="http://www.jinjiang.com/">锦江旅游</a>
          <a target="_blank" href="http://www.huoche.net/">火车时刻表</a>
          <a target="_blank" href="http://www.tripadvisor.cn/">TripAdvisor</a
          ><a target="_blank" href="http://www.tianxun.com/">天巡网</a
          ><a target="_blank" href="http://www.mayi.com/">短租房</a
          ><a target="_blank" href="http://www.zuzuche.com/">租租车</a>
          <a target="_blank" href="http://www.5fen.com/">五分旅游网</a>
          <a target="_blank" href="http://www.zhuna.cn/">酒店预订</a
          ><a target="_blank" href="http://www.ailvxing.com/">爱旅行网</a
          ><a target="_blank" href="http://360.mafengwo.cn/all.php">旅游</a
          ><a target="_blank" href="http://vacations.ctrip.com/">旅游网</a>
          <a target="_blank" href="http://www.wed114.cn/">wed114结婚网</a>
          <a target="_blank" href="http://www.chexun.com/">车讯网</a
          ><a target="_blank" href="http://www.aoyou.com/">遨游旅游网</a
          ><a target="_blank" href="http://www.91.com/">手机</a>
          <a href="javascript:;" target="_blank">更多友情链接&gt;&gt;</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "../components/NavBar";
export default {
  components: {
    NavBar,
  },
};
</script>

<style scoped>
a {
  background-color: transparent;
  text-decoration: none;
  color: #ff9d00;
  cursor: pointer;
}

a:hover {
  outline: 0;
  text-decoration: underline;
  color: #ff8a00;
}

.container {
  width: 1000px;
  margin: 0 auto;
}

.crumb {
  margin-bottom: 20px !important;
  height: 20px;
  padding: 15px 0;
  color: #666;
  font-size: 12px;
  line-height: 20px;
  border-bottom: 1px solid #ededed;
}

.crumb {
  width: 1000px;
  font: 12px Arial, "Microsoft Yahei", "\5FAE\8F6F\96C5\9ED1", Tahoma, Helvetica,
    STHeiti, "Hiragino Sans GB";
  height: 20px;
  padding: 15px 0;
  color: #666;
  line-height: 20px;
  margin: 0 auto;
}

.crumb .item {
  float: left;
}

.crumb .item.cur {
  color: #ff7000;
}

.crumb a {
  color: #666;
  font-size: 12px;
}

.crumb .item a {
  color: #666;
  font-size: 12px;
}

.crumb .item em {
  margin: 0 6px;
  color: #999;
  font-family: "simsun";
  font-style: normal;
}

.crumb .drop {
  float: left;
}

.crumb .drop .hd {
  height: 20px;
}

.crumb .drop .hd a {
  display: block;
  height: 20px;
  _float: left;
  padding: 0 13px 0 5px;
}

.crumb .drop .bd {
  position: absolute;
  display: none;
  margin: 5px 0 0 -10px;
  _margin: 20px 0 0 -70px;
  z-index: 20;
  padding: 10px 0 8px 7px;
  background-color: #fff;
  border: 1px solid #e5e5e5;
}

.crumb .drop .hd i {
  position: absolute;
  margin: 8px 0 0 3px;
  *margin: 4px 0 0 3px;
  width: 0;
  height: 0;
  border-top: 3px solid #ff7000;
  border-left: 3px dashed transparent;
  border-right: 3px dashed transparent;
  overflow: hidden;
  font-size: 0;
}

.crumb .drop.open .hd a {
  background-color: #ff7000;
  color: #fff;
}

.crumb .drop.open .hd i {
  border-top-color: #fff;
}

.crumb .drop.open .bd {
  display: block;
}

.crumb .drop .bd .arrow {
  position: absolute;
  left: 20px;
  top: -6px;
  width: 0;
  height: 0;
  border-bottom: 6px solid #e5e5e5;
  border-left: 6px dashed transparent;
  border-right: 6px dashed transparent;
  font-size: 0;
}

.crumb .drop .bd .arrow b {
  position: absolute;
  left: -6px;
  top: 2px;
  width: 0;
  height: 0;
  border-bottom: 6px solid #fff;
  border-left: 6px dashed transparent;
  border-right: 9px dashed transparent;
  font-size: 0;
  overflow: hidden;
}

.crumb .drop .col {
  float: left;
  width: 145px;
}

.crumb .drop .more {
  clear: both;
  padding: 10px 20px 0 0;
  text-align: right;
}

.crumb .drop h3 {
  padding-left: 7px;
  color: #333;
}

.crumb .drop li {
  float: left;
  display: inline;
  width: 137px;
  margin: 4px 8px 0 0;
  height: 21px;
  line-height: 20px;
  overflow: hidden;
}

.crumb .drop li a {
  display: block;
  height: 21px;
  padding: 0 7px;
  color: #333;
}

.crumb .drop .more a {
  color: #ff7000;
}

.content {
  float: left;
  width: 680px;
}

.filter {
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
}

.filter-wrapper {
  position: relative;
  width: 680px;
}

.filter-tag {
  float: left;
  width: 610px;
  text-align: center;
  height: 32px;
  overflow: hidden;
}

.filter-tag.extend {
  height: auto;
}

.filter .trigger {
  color: #ff9d00;
  line-height: 22px;
  position: absolute;
  right: 0;
  top: 0;
}

.filter-tag li {
  float: left;
  width: 89px;
  margin: 0 10px 10px 0;
  display: inline;
}

.filter-tag li a {
  display: block;
  height: 20px;
  border: 1px solid #e5e5e5;
  background-color: #f6f6f6;
  border-radius: 10px;
  color: #666;
  line-height: 20px;
}

.content .guide-list {
  float: none;
  width: auto;
}

.guide-list .item {
  margin-bottom: 35px;
}

.guide-list .item a {
  display: block;
}

.guide-list .img {
  float: left;
  display: inline;
  margin-right: 15px;
  width: 220px;
  height: 150px;
  position: relative;
  overflow: hidden;
}

.guide-list .detail {
  margin-left: 235px;
  height: 150px;
  position: relative;
}

.guide-list .img span {
  position: absolute;
  left: 0;
  top: 6px;
  background-color: #ff6262;
  line-height: 25px;
  padding: 0 5px;
  color: #fff;
  font-size: 12px;
  border-radius: 0 2px 2px 0;
}

.guide-list h3 {
  position: relative;
  top: -3px;
  margin-bottom: 12px;
  font-size: 18px;
  color: #333;
  line-height: 24px;
  font-weight: normal;
}

.guide-list a:hover h3 {
  color: #ff9d00;
}

.guide-list ul {
  line-height: 22px;
  font-size: 14px;
  color: #666;
}

.guide-list li {
  height: 22px;
  overflow: hidden;
}

.guide-list li:before {
  content: "";
  float: left;
  margin: 9px 9px 0 0;
  width: 6px;
  height: 6px;
  background-color: #ff9d00;
  border-radius: 50%;
}

.guide-list .extra {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  font-size: 14px;
  color: #666;
  line-height: 16px;
}

.guide-list .extra span {
  display: inline-block;
  margin-right: 20px;
}

.guide-list .location i,
.guide-list .view i {
  float: left;
  margin-right: 5px;
  display: inline-block;
  width: 14px;
  height: 16px;
  background: url(../assets/images/icon-guide.png) no-repeat 0 0;
  vertical-align: middle;
}

.guide-list .view i {
  margin-top: 1px;
  width: 18px;
  height: 14px;
  background-position: -20px 0;
}

.filter-tag li a:hover,
.filter-tag li.on a {
  text-decoration: none;
  color: #fff;
  background-color: #ffa800;
  border-color: #ffa800;
}

.crumb .drop .hd a:hover {
  text-decoration: none;
}

.crumb .drop li a:hover,
.crumb .drop li.on a {
  background-color: #fff1d7;
  color: #ff7000;
  text-decoration: none;
}

.guide-list .item a:hover {
  padding: 20px;
  margin: -20px;
  text-decoration: none;
  background-color: #f4f4f4;
}

.side-sales {
  float: right;
  width: 290px;
}

.side-sales h3 {
  font-size: 18px;
  margin: -3px 0 15px;
  font-weight: normal;
  color: #333;
  line-height: 24px;
}

.side-sales li {
  margin-bottom: 20px;
}

.side-sales li a {
  display: block;
  padding-left: 110px;
  height: 70px;
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}

.side-sales .image {
  float: left;
  margin-left: -110px;
  width: 100px;
  height: 70px;
  overflow: hidden;
}

.side-sales .title {
  height: 40px;
  margin-bottom: 12px;
}

.side-sales .price {
  color: #ff9d00;
}

.side-sales li a:hover {
  text-decoration: none;
}

.side-sales li a:hover .title {
  color: #ff9d00;
}
</style>